<template>
	<view class="message">
		<view class="item" v-for="(item,index) in list" :key="index">
			<view class="acea-row row-between-wrapper bor-bot pb30">
				<view class="acea-row row-middle">
					<image class="icon" v-if="item.level==3" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/message01.png" mode="aspectFit"></image>
					<image class="icon" v-else src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/message02.png" mode="aspectFit"></image>
					<text class="color333 fs-30 ml10">{{ item.title }}</text>
				</view>
				<view class="color333 fs-24">{{ item.add_time }}</view>
			</view>
			<view class="text acea-row row-between row-column">
				<view class="color333 fs-36 bold">{{ item.message }}</view>
				<view class="fs-30 color666 mt20">{{ item.deviceName }}</view>
			</view>
		</view>
		<view class='loadingicon acea-row row-center-wrapper'>
			<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
		</view>
		
		
	</view>
</template>

<script>
	import{
		noticeList
	} from '@/api/admin.js'
	export default {
		data() {
			return {
				page:1,
				limit:10,
				list:[],
				loadend: false,
				loading: false,
				loadTitle: this.$t(`加载更多`), 
			};
		},
		onShow() {
			this.page = 1;
			this.loadend = false;
			this.loading = false;
			this.list = [];
			this.getlist();
		},
		methods:{
			getlist(){
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '';
				noticeList({ page:that.page,limit:that.limit }).then(res=>{
					let list = res.data.data;
					let arr = that.$util.SplitArray(list, that.list);
					let loadend = list.length < that.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
					that.$set(that, 'list', arr);
					that.$set(that, 'page', that.page + 1);
				}).catch(err=>{
					that.loading = false;
					that.loadTitle = that.$t(`加载更多`);
				})
			},
		},
		onReachBottom() {
			this.getlist();
		}
	}
</script>

<style lang="scss">
	.message{
		padding: 30rpx;
		
		.item{
			padding: 30rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
			
			.icon{
				width: 52rpx;
				height: 52rpx;
			}
			
			.text{
				min-height: 200rpx;
				padding: 30rpx 0 0 0;
			}
		}
		
	}
</style>
